<template>
  <section>
    <el-table :data="listTableData"
              stripe
              style="width: 100%;min-height: 400px">
      <el-table-column label="订单"
                       prop="id"
                       header-align="center"
                       width="500px">
        <template slot-scope="scope">
          <!--订单top-->
          <div class="">
            <span>订单号 : {{scope.row.orderNo}}</span>
            <span> 创建时间 : {{scope.row.createTime}}</span>
          </div>
          <!--详情-->
        </template>
      </el-table-column>

      <el-table-column label="实收款"
                       align="center">
        <template slot-scope="scope">
          ￥{{scope.row.payment}}
          <div v-if="scope.row.postage!=0"
               class="mini-size">(含运费￥{{scope.row.postage}})</div>
          <div v-else
               class="mini-size">包邮</div>
        </template>
      </el-table-column>
      <el-table-column label="结算方式"
                       align="center">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.status!=10"
                  :type="scope.row.paymentType == 1 ? '' : 'warning'"
                  close-transition
                  size="mini">
            {{scope.row.paymentType | paymentTypeStatus}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="买家"
                       align="center">
        <template slot-scope="scope">
          <el-popover ref="popover"
                      placement="right"
                      width="300"
                      trigger="hover">
            <div class="">
              收&nbsp;件&nbsp; 人：{{scope.row.receivername}}
            </div>
            <div class="">
              联系电话：{{scope.row.userphone}}
            </div>
            <div class="">
              收货地址：{{scope.row.address}}
            </div>
          </el-popover>
          <el-button type="text"
                     size="small"
                     class="abtn"
                     v-popover:popover>{{scope.row.username}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="更新时间"
                       prop="updateTime"
                       align="center">
      </el-table-column>
      <el-table-column prop="status"
                       label="交易状态"
                       header-align="center"
                       align="center">
        <template slot-scope="scope">
          <el-tag :type="operatingStatusType(scope.row.status)"
                  close-transition
                  size="mini">
            {{scope.row.status | operatingStatus}}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

  </section>
</template>
<script>
export default {
  props: ['listTableData'],
  filters: {
    paymentTypeStatus (type) {
      let status = {};
      type === 0 ? status = '货到付款' : status = '在线支付';
      return status;
    },
    typeStatus (type) {
      let status = {};
      type === 0 ? status = '货到付款' : status = '在线支付';
      return status;
    },
    operatingStatus: function (value) {
      let state = '';
      switch (value) {
        case 10:
          return state = '待付款';
          break;
        case 20:
          return state = '待发货';
          break;
        case 40:
          return state = '待收货';
          break;
        case 50:
          return state = '已完成';
          break;
        case 60:
          return state = '交易关闭';
          break;
        case 70:
          return state = '退款中';
          break;
        case 80:
          return state = '退款完成';
          break;
      }
      return state;
    }
  },
  methods: {
    operatingStatusType (value) {
      let state = '';
      switch (value) {
        case 10:
          return state = '';
          break;
        case 20:
          return state = 'warning';
          break;
        case 40:
          return state = 'info';
          break;
        case 50:
          return state = 'success';
          break;
        case 60:
          return state = 'danger';
          break;
        case 70:
          return state = 'info';
          break;
        case 80:
          return state = 'success';
          break;
      }
      return state;
    },
  },
}
</script>
<style scoped lang="scss">
</style>
